import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Link
} from 'react-router-dom'
// import Loadable from 'react-loadable'

import asyncComponent from "./components/AsyncComponent"
// import MyLoadingComponent from "./components/MyLoadingComponent"

// import PrivateRoute from './privateRoute'
import Dashboard from './views/home'
// import NotFound from './views/NotFound'

const AsyncShopping = asyncComponent(() => import("./views/shopping"))
const AsyncBooks = asyncComponent(() => import("./views/books"))
const AsyncSvgs = asyncComponent(() => import("./views/svgs"))
const AsyncBorderCss = asyncComponent(() => import("./views/borderCss"))
const AsyncGames = asyncComponent(() => import("./views/games"))
const AsyncCheckboxs = asyncComponent(() => import("./views/checkboxs"))
// const AsyncHome = Loadable({
//   loader: () => import("./views/home"),
//   loading: MyLoadingComponent
// });
/**
 * 若只想要路由在路径完全相同时渲染，你就可以使用 exact props。
 *
 *
 * Switch组件
 * 当一起使用多个<Route>时，所有匹配的routes都会被渲染
 * 有<Switch>组件的话，只有第一个匹配路径的子<Route>会渲染。
 *
 */


const router = (
  <Switch>
    <Route exact path="/" component={Dashboard}/>
    <Route path="/shopping" component={AsyncShopping} />
    <Route path="/books" component={AsyncBooks} />
    <Route path="/avgAnimation" component={AsyncSvgs} />
    <Route path="/borderCss" component={AsyncBorderCss} />
    <Route path="/games" component={AsyncGames} />
    <Route path="/checkboxs" component={AsyncCheckboxs} />
    {/*<Route path="/music/play/:id" component={MusicPlayer}/>*/}
    {/*<PrivateRoute  path="/user" component={AuthIndex} />*/}
    {/*无匹配页面*/}
    {/*<Route component={NotFound}/>*/}
  </Switch>
)

export default router